<template>
    <v-data-table :headers="headers" :items="desserts" sort-by="calories" class="elevation-1">
        <!-- 顶部插槽 -->
        <template v-slot:top>
            <v-toolbar flat>
                <v-toolbar-title>测试报告</v-toolbar-title>
                <v-divider class="mx-4" inset vertical></v-divider>
                <v-spacer></v-spacer>
            </v-toolbar>
        </template>
        <!-- 计划详情插槽 -->
        <template v-slot:[`item.plan`]="{ item }">
            <v-tooltip bottom>
                <template v-slot:activator="{ on, attrs }">
                    <v-btn color="primary" dark v-bind="attrs" v-on="on">
                        查看详情
                    </v-btn>
                </template>
                <h3>计划id: {{ item.plan.id }}</h3>
                <h3>计划名称: {{ item.plan.name }}</h3>
                <h3>用例详情: </h3>
                <h3 v-for="i in item.plan.testcases">{{ JSON.stringify(i) }}</h3>
            </v-tooltip>
        </template>
        <!-- 报告插槽 -->
        <template v-slot:[`item.report`]="{ item }">
            <a :href="item.report" target="_blank">{{ item.report }}</a>
        </template>
        <!-- 操作插槽 -->
        <template v-slot:item.actions="{ item }">
            <v-btn color="warning" @click="deletePlan(item)">删除</v-btn>
        </template>
    </v-data-table>
</template>

<script>
export default {
    data: () => ({
        expanded: [],
        headers: [
            { text: '构建ID', align: 'start', sortable: false, value: 'id', },
            { text: '计划ID', value: 'plan_id' },
            { text: '计划详情', value: 'plan' },
            { text: '报告地址', value: 'report' },
            { text: '创建时间', value: 'create_time' },
            { text: '操作', value: 'actions', sortable: false },
        ],
        desserts: []
    }),

    created() {
        this.initData()
    },

    methods: {
        // 初始化数据
        initData() {
            console.log('初始化数据')
            this.$api.build.getBuild().then((result) => {
                console.log('result', result)
                // 将接口返回数据赋值给表格
                this.desserts = result.data.data
            }).catch((err) => {
                console.log('err', err)
            })
        },
        // 删除报告
        deletePlan(item) {
            this.$api.build.deleteBuild({ 'id': item.id }).then((result) => {
                console.log('result', result)
                // 删除成功时 发起初始化数据操作
                if (result.data.code == 0) {
                    this.initData()
                }
            }).catch((err) => {
                console.log('err', err)
            })
        },
    }
}
</script>